<template>
	<view class="container">
		<view class="card">
			<view class="title flex-row">
				<view class="name">工作成效</view>
			</view>
			<view class="item">
				<view class="flex-row">
					<view>巡检任务数:{{ count.allmis || 0 }}</view>
					<view>完成任务数:{{ count.donemis || 0 }}</view>
					<view>任务完成率:{{ rate.done || 0 }}%</view>
				</view>
				<view class="flex-row">
					<view>发现隐患数:{{ count.donessp || 0 }}</view>
					<view>参与整改数:{{ count.findssp || 0 }}</view>
					<view>参与验收率:{{ rate.part || 0 }}%</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title">
				<view class="name">点、踩</view>
			</view>
			<view class="item">
				<view v-show="isUp">
					<image src="../../static/img/risk/hand-up-active.png"></image>
					<image @click="toggle(false)" src="../../static/img/risk/hand-down.png"></image>
				</view>
				<view v-show="!isUp">
					<image @click="toggle(true)" src="../../static/img/risk/hand-up.png"></image>
					<image src="../../static/img/risk/hand-down-active.png"></image>
				</view>
			</view>
			<view class="title">
				<view class="name">评价内容</view>
			</view>
			<view class="item">
				<textarea v-model="content" placeholder="请输入评价内容"/>
			</view>
		</view>
		<button @click="submitComment" type="warn" size="mini">提交</button>
	</view>
</template>

<script>
const GOOD = '做得很好，请继续保持！';
const BAD = '请按时完成部门或下属的安全风险管控双重预防的巡检、隐患自查、自报，整改闭环既定工作，此项纳入年、月度考核！请知悉！';
export default{
	data(){
		return {
			isUp: true,
			content: GOOD,
			userid: '',
			count: {},
			rate: {
				done: 0,
				part: 0
			}
		}
	},
	onLoad(option){
		this.userid = option.id;
		this.getData();
	},
	methods: {
		toggle(bool){
			this.isUp = bool;
			this.content = bool ? GOOD : BAD;
		},
		// 提交评价
		submitComment(){
			uni.request({
				method: 'POST',
				url: this.$API.dangerCommentSubmit,
				header: this.$API.get_head(),
				data: {
					userid: uni.getStorageSync('userid'),
					pintjia_man: this.userid,
					zt: this.isUp ? 'zan' : 'cai',
					content: this.content
				},
				success: (res)=>{
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 1) return;
					setTimeout(()=>{
						uni.navigateBack();
					}, 1500);
				}
			})
		},
		// 获取数据
		getData(){
			let _this = this;
			uni.request({
				url: _this.$API.dangerComment,
				header: _this.$API.get_head(),
				data: {userid: this.userid},
				success: (res)=>{
					_this.count = res.data.data;
					
					// 计算比例
					if(_this.count.allmis > 0){
						_this.rate.done = Number.parseInt((_this.count.donemis / _this.count.allmis) * 100);
						_this.rate.part = Number.parseInt((_this.count.checkssp / _this.count.allmis) * 100);
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	padding: 20upx;
	box-sizing: border-box;
}
.card{
	background: #C0E9FA;
	margin-bottom: 16upx;
	border-radius: 16upx;
	padding: 18upx 20upx 20upx;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	font-size: 30upx;
}
.card .title view.name{
	text-indent: 16upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 6upx;
	height: 30upx;
	background: #179DFE;
	border-radius: 6upx;
	position: absolute;
	top: 12upx;
	left: 0;
}
.card .title button{
	padding: 0;
	width: 84upx;
	height: 44upx;
	font-size: 24upx;
	line-height: 44upx;
	border-radius: 6upx;
	background-color: #F98202;
}
.card .item .flex-row view{
	width: calc(100% / 3);
}
.card .item image{
	width: 60upx;
	height: 60upx;
	margin-right: 20upx;
}
.card .item textarea{
	width: 100%;
	padding: 10upx;
	background: #F1F1F1;
	border-radius: 12upx;
	box-sizing: border-box;
}
button{
	width: 240upx;
	margin: 20upx calc(50% - 120upx);
}
</style>
